<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<link href="http://www.officemax.com/omax/images/favicon.ico" rel="SHORTCUT ICON">

<title>Officemax Context-Aware Gadget Ad</title>
<style>
BODY {font-family:Arial;border:none;background-color:#eeeeee;}
FORM {display:inline;margin:0;padding:0px;}
FIELDSET {border:solid 1px #9999cc;margin:0px;padding:8px;}
LEGEND {font-weight:bold; border:solid 1px #9999cc;padding:4px; padding-right:12px;}
TD {font-size:9pt;}
OPTION {font-size:9pt;}
SELECT {font-size:9pt;}
INPUT {font-size:9pt; font-family:monospace;}
IFRAME {overflow:hidden;border:none;padding:0;margin:0;background-color:#ffffff;}
.obscured { font-size:10pt; color:#666666; background-color:#cccccc; border:dashed 1px #999999; }
.faded {font-style: italic; color:#cccccc;}
.note {font-size:9pt;}
</style>
</head><body onLoad="init();">
<div id="linkto" class="faded" style="font-size: 8pt; text-align: right;"><a href="" style="font-style: normal;">link to this page</a></div>
<table border="0"><tbody><tr>
<td valign="top" width="738"><fieldset style="background-color: rgb(238, 238, 255);">
<legend style="background-color: rgb(255, 255, 255);">Officemax's Context-Aware Gadget Ad</legend>
<form method="get" id="theForm">
<table>
  <tbody>
    <tr>
      <td align="right">url:</td>
      <td><input id="url" size="64" name="url" value="http://officemaxgadget.googlepages.com/WWWxHHH_OfficemaxGadget-Base_v2.2.xml" type="text"></td>
    </tr>
    <tr>
      <td align="right">versions:  </td>
      <td>
        <span style="font-size: 10px;">
          <a title="work in progress" href="javascript:goLatest('http://officemaxgadget.googlepages.com/WWWxHHH_OfficemaxGadget-Base_v4.xml');">prototype (v4)</a>&nbsp;&nbsp;
          <a title="first production version" href="javascript:goLatest('http://officemaxgadget.googlepages.com/WWWxHHH_OfficemaxGadget-Base_v2.xml');">v2</a>&nbsp;&nbsp;
          <a title="live in production" href="javascript:goLatest('http://officemaxgadget.googlepages.com/WWWxHHH_OfficemaxGadget-Base_v2.2.xml');">v2.2</a>&nbsp;&nbsp;
          <a title="live in production (minified)" href="javascript:goLatest('http://officemaxgadget.googlepages.com/WWWxHHH_OfficemaxGadget-Base_v2_min.xml');">v2.2 (Production)</a>&nbsp;&nbsp;
          <a title="live in production" href="javascript:goLatest('http://officemaxgadget.googlepages.com/WWWxHHH_OfficemaxGadget-Base_v3.xml');">v3 (Free Shipping)</a>&nbsp;&nbsp;
          <a title="live in production (minified)" href="javascript:goLatest('http://officemaxgadget.googlepages.com/WWWxHHH_OfficemaxGadget-Base_v3_min.xml');">v3 (Free Shipping) (Production)</a>&nbsp;&nbsp;
        </span>
      </td>
      <td></td>
    </tr>
    <tr>
      <td align="right">rawquery:</td>
      <td><input id="rawquery" name="rawquery" size="11" type="text"></td></tr>
    <tr>
      <td colspan="2">
        <input id="chk0" name="chk0" onClick="load(0)" type="checkbox">728x90
        <input id="chk2" name="chk2" onClick="load(0)" type="checkbox">300x250
        <input id="chk1" name="chk1" onClick="load(0)" type="checkbox">336x280
        <input id="chk3" name="chk3" onClick="load(0)" type="checkbox">160x600
        <input id="chk4" name="chk4" onClick="load(0)" type="checkbox">120x600
        <input id="chk5" name="chk5" onClick="load(0)" type="checkbox">250x250
        <input id="chk6" name="chk6" onClick="load(0)" type="checkbox">200x200
        <input id="chkAll" onClick="showAll()" type="checkbox"><span style="font-weight: bold;" id="chkAllPrompt">view all</span>
      </td>
      <td rowspan="10" valign="top">
        <p>
          <input id="chknocaching" name="chknocaching" type="checkbox">noCaching<br>
        </p>
        <div style="text-align: right;">
          <input value="make ad" style="font-weight: bold; font-family: Arial;" type="submit">
          <input onClick="resetForm()" value="reset" style="font-family: Arial; font-size: 8pt;" type="reset">
        </div>
      </td>
    </tr>
    <tr>
      <td align="right">page_url:</td>
      <td><input id="page_url" name="page_url" size="64" type="text"></td>
    </tr>
  </tbody>
</table>
</form></fieldset></td>
<td rowspan="3" class="more" valign="top">

Sample Keywords:
<ul style="margin-top: 0pt;">
<a href="http://officemaxgadget.googlepages.com/Officemax.html?rawquery=printer&amp;page_url=">printer</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?rawquery=office%20chair&amp;page_url=">office chair</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?rawquery=lcd%20monitor&amp;page_url=">lcd monitor</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?rawquery=Fellows%20shredder&amp;page_url=">Fellows shredder</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?rawquery=ink%20cartridge&amp;page_url=">ink cartridge</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?rawquery=office%20supplies&amp;page_url=">office supplies</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?rawquery=desk&amp;page_url=">desk</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?rawquery=Garmin%20gps&amp;page_url=">Garmin gps</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?rawquery=laptop&amp;page_url=">laptop</a>
</ul>
Easy Sites:
<ul style="margin-top: 0pt;">
<a href="http://officemaxgadget.googlepages.com/Officemax.html?keyword=&amp;page_url=http://www.garden.com">garden.com</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?keyword=&amp;page_url=http://www.mowers.com">mowers.com</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?keyword=&amp;page_url=http://www.outdoor.com">outdoor.com</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?keyword=&amp;page_url=http://www.chairs.com">chairs.com</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?keyword=&amp;page_url=http://www.waterhose.com">waterhose.com</a>
</ul>
Difficult Sites:
<ul style="margin-top: 0pt;">
<a href="http://officemaxgadget.googlepages.com/Officemax.html?keyword=&amp;page_url=http://www.egotastic.com">egotastic.com</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?keyword=&amp;page_url=http://www.nytimes.com">nytimes.com</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?keyword=&amp;page_url=http://www.cnn.com">cnn.com</a>
<a href="http://officemaxgadget.googlepages.com/Officemax.html?keyword=&amp;page_url=http://www.reuters.com">reuters.com</a>
</ul>
<p>
</p></td>
</tr>
<tr><td valign="top">
<div onClick="showN(0)" id="sz0" class="obscured" style="width:728px; height:92px;">Loading...</div>
<table width="734" cellpadding="4" cellspacing="0" border="0">
<tr>
<td>
<div onClick="showN(3)" id="sz3" class="obscured" style="width:160px; height:600px;">Loading...</div>
</td>
<td>
<div onClick="showN(4)" id="sz4" class="obscured" style="width:120px; height:600px;">Loading...</div>
</td><td valign="top" align="right">
<div onClick="showN(2)" id="sz2" class="obscured" style="width:300px; height:250px;">Loading...</div>
<br clear="all">
<p>
<div onClick="showN(1)" id="sz1" class="obscured" style="width:336px; height:280px;">Loading...</div>
</p>
</td>
</tr>
<tr>
<td><div onClick="showN(5)" id="sz5" class="obscured" style="width:250px; height:250px;">Loading...</div></td>
<td><div onClick="showN(6)" id="sz6" class="obscured" style="width:200px; height:200px;">Loading...</div></td>
</tr>


</tbody></table>
</td>
</tr></tbody></table>
<script>
// the assumption is the URL will point to a WWWxHHH set
// eg given tmp/WWWxHHH-contextual-ad.xml there will exist
// tmp/728x90-contextual-ad.xml, etc
// so the gadget URL's will be like this
// http://www.google.com/ig/wherever/ + WWWxHHH + basename.xml
var arSz = new Array();
arSz[0]='728x90';
arSz[1]='336x280';
arSz[2]='300x250';
arSz[3]='160x600';
arSz[4]='120x600';
arSz[5]='250x250';
arSz[6]='200x200';

function resetForm() {
  var it = document.getElementById('linkto');
  if (it) {
    it.innerHTML = 'link to this page';
  }
  return true;
}

function setForm() {
  var qry = location.search.substring(1);
  if (qry.length < 1) {
    document.getElementById('theForm').submit();
    return;
  }
  
  var args = qry.split('&');
  for (var i = 0, n = args.length; i < n; i++) {
    var ar = args[i].split('=');
    if (ar.length > 1) {
      if (i == 0) {
        var it2 = document.getElementById('linkto');
        if (it2) {
          it2.innerHTML = '<a href="" style="font-style:normal;">link to this page</a>';
        }
      }
      var id = ar[0];
      if (id.indexOf('up_') >= 0) {
        var hmmm = id.replace('/up_/','chk');
        if (document.getElementById(hmmm)) {
          id = hmmm;
        } else {
          hmmm = id.replace('/up_/','sel');
          if (document.getElementById(hmmm)) {
            id = hmmm;
          }
        }
      }
      var value = ar[1];
      var it = document.getElementById(id);
      if (it) {
        if (id.indexOf('sel_') == 0) {
          var opts = it.options;
          for (var j = 0; j < opts.length; j++) {
            if (opts[j].value == value) {
              opts[j].selected = true;
            } else {
              opts[j].selected = false;
            }
          }
        } else if (id.indexOf('chk') == 0) {
          it.checked = (value == 'on' ? true : false);
        } else {
          it.value = decodeURIComponent(value).replace(/\+/g,' ');
          //it.value = unescape(value);
        }
      }
    }
  }
  for (var i = 0; i<5 ; i++) {
    if( document.getElementById('chk' + i) && document.getElementById('chk' + i).checked ) {
      break;
    }
  }
  if (i==5) {
    document.getElementById('chk0').checked = true;
  }
} 

function load(reload) {
  var url = '';
  var url_obj = document.getElementById('url');
  if (url_obj) {
    url = url_obj.value;
  }
  if (url.length < 1) {
    url = 'http://officemaxgadget.googlepages.com/WWWxHHH_OfficemaxGadget-Base_v2.2.xml';
  }

  var ups = '';

  var rawquery = document.getElementById('rawquery');
  if (rawquery) {
    ups += '&up_rawquery=' + encodeURIComponent(rawquery.value);
  }

  var page_url = document.getElementById('page_url');
  if (page_url) {
    ups += '&up_page_url=' + encodeURIComponent(page_url.value);
  }

//  ups += '&up_search_engine_type=static'
//  ups += '&up_search_engine_url=' 
   + encodeURIComponent('http://officemaxgadget.googlepages.com/omax_kw_list.xml?max-results=1');
  var show_searchbox = document.getElementById('chkshow_searchbox');
  if (show_searchbox) {
    ups += '&up_show_searchbox=' + (show_searchbox.checked?1:0);
  }
  var show_rawquery = document.getElementById('chkshow_rawquery');
  if (show_rawquery) {
    ups += '&up_show_rawquery=' + (show_rawquery.checked?1:0);
  }

  var ll = document.getElementById('ll');
  if (ll) {
    ups += '&up_ll=' + encodeURIComponent(ll.value);
  }
  var loca = document.getElementById('loca');
  if (loca) {
    ups += '&up_location=' + encodeURIComponent(loca.value);
  }

  //ups += '&nocache=1';
  var nocaching = document.getElementById('chknocaching');
  if (nocaching) {
    ups += '&nocache=' + (nocaching.checked ? 1 : 0);
  }

  var logo = document.getElementById('logo');
  if (logo) {
    ups += '&up_logo=' + encodeURIComponent(logo.value);
  }

  var offers_url = document.getElementById('offers_url');
  if (offers_url) {
    ups += '&up_offers_url=' + encodeURIComponent(offers_url.value);
  }

  var clickurl = document.getElementById('clickurl');
  if (clickurl) {
    if (clickurl.value.length < 1) {
      clickurl.value = 'http://gadgetads.googlecode.com/svn/trunk/test_clickurl.html?url=';
    }
    ups += '&up_clickurl=' + encodeURIComponent(clickurl.value);
  }
 
  for (var i = 0, n = arSz.length; i < n; i++) {
    var wrapper = document.getElementById('sz' + i);
    if (wrapper) {
      var chk = document.getElementById('chk' + i);
      if (chk && chk.checked) {
        if (reload || wrapper.innerHTML.indexOf('iframe') < 0) {
          var ar = arSz[i].split('x');
          var width = ar[0];
          var height = ar[1];
          var gadget_url = '';
          if ( url.indexOf('WWWxHHH') >= 0) {
            gadget_url = url.replace(/WWWxHHH/,width + 'x' + height) + ups;
          } else if (url.match(/\d{3}x\d{2,3}/)) {
            gadget_url = url.replace(/\d{3}x\d{2,3}/,width + 'x' + height) + ups;
          } else {
            gadget_url = url + ups;
          }
          
// was ads.gmodules.com
          var iframe = '<iframe frameborder="no" scrolling="no"'
              + ' width="' + width + '" height="' + height + '"'
              + 'src="' + 'http://gmodules.com/ig/ifr?url=' + gadget_url
              + '"></iframe>';
          wrapper.innerHTML = iframe;
          wrapper.style.cursor = 'default';
          wrapper.style.border = 'solid 1px #ffffff';
        }
      } else {
        wrapper.innerHTML = '<center><p>click to view ' + arSz[i] + '</p></center>';
        wrapper.style.cursor = 'pointer';
        wrapper.style.border = 'dashed 1px #999999';
      }
    }
  }
}

function showN(n) {
  var it = document.getElementById('chk' + n);
  if (it) {
    if (it.checked) { 
      return true;
    }
    it.checked = true;
    load(0);
  }
}

function showAll() {
  var chkAll = document.getElementById('chkAll');
  if (chkAll) {
    for (var i = 0, n = arSz.length; i < n; i++) {
      var chk = document.getElementById('chk' + i);
      chk.checked = chkAll.checked;
    }
  }

  var chkAllPrompt = document.getElementById('chkAllPrompt');
  if (!chkAll.checked) {
    var chk = document.getElementById('chk0');
    if (chk) {
      chk.checked = true;
    }
    chkAllPrompt.innerHTML = 'view all'; 
  } else {
    chkAllPrompt.innerHTML = 'close views'; 
  }

  load(0);
}

function init() {
  setForm();
  load(1);
}

function goLatest(url) {
  document.getElementById('chknocaching').checked = true;
  document.getElementById('url').value = url;
  document.getElementById('theForm').submit();
}

function goBase() {
  document.getElementById('search_engine_url').value='http://www.google.com/base/feeds/snippets?bq=__KEYWORD__[item%20type:products]';
  document.getElementById('sel_search_engine_type').selectedIndex=0;
  document.getElementById('theForm').submit();
  return false;
}

function goSpread() {
  document.getElementById('search_engine_url').value='http://spreadsheets.google.com/feeds/list/o01001044202396318123.4978034076610508404/od6/public/values?q=__KEYWORD__&start-index=4';
  document.getElementById('sel_search_engine_type').selectedIndex=1;
  document.getElementById('theForm').submit();
  return false;
}

function goFeed() {
  document.getElementById('search_engine_url').value='http://echo3.net/cta/img/static_feed.xml';
  document.getElementById('sel_search_engine_type').selectedIndex=2;
  document.getElementById('theForm').submit();
  return false;
}

function goLocal() {
  document.getElementById('search_engine_url').value='';
  document.getElementById('sel_search_engine_type').selectedIndex=3;
  document.getElementById('theForm').submit();
  return false;
}

function setLogo(n) {
  // see http://www.google.com/stickers.html 
  var it = document.getElementById('logo');
  if (n == 0) {
    it.value = 'http://www.google.com/logos/jcwilliams.gif';
  } else if (n == 1) {
    it.value = 'http://www.google.com/logos/Logo_60wht.gif';
  } else if (n == 2) {
    it.value = '';
  } else if (n == 3) {
    it.value = 'http://www.victoriapenthouse.ca/images/google_earth.jpg';
  } else if (n == 4) {
    it.value = 'http://www.google.com/logos/Logo_25wht.gif';
  } else if (n == 5) {
    it.value = 'The%20Logo';
  }
  document.getElementById('theForm').submit();
}

function setWWWxHHH() {
  var it = document.getElementById('url');
  if (it) {
    it.value = 'http://officemaxgadget.googlepages.com/WWWxHHH_OfficemaxGadget-Base_v2.2.xml';
  }
  return false;
}

function setLatLng() {
  document.getElementById('ll').value = '36.372092,-94.207764';
}

</script>
<!--
<div class="note">
[1] if the ad size is designated in the url (WWWxHHH, 728x90, 300x250, etc) it will be replaced 
by the actual size to be displayed in each iframe. For development purposes, testing is being done
with a size-flexible gadget. Use <a onclick="setWWWxHHH();" href="#"
>http://officemaxgadget.googlepages.com/WWWxHHH_OfficemaxGadget-Base_v2.2.xml</a> 
to test with the predetermined-size versions instead.
<br>
[2] currently set for development, production version will default to 'off'<br>
[3] for use during development, will remove prior to production<br>
[4] for use during development, will remove prior to production<br>
<p align="right" class="note">
<a target="_blank" href="ad.xml">Current Source</a>,
</p>
-->

</body></html>